<template>
	<div>
		<div class="content ">
			<div class="box" v-for="(item, index) in list" :key="index">
				<div class="size">
					<span class=""
						><i class="iconfont">&#xe668;</i>存储容量{{
							item.storage_size
						}}</span
					>
				</div>
				<div class="btm"></div>
				<div class="_box">
					<div class="logo">
						<img src="../../assets/imgs/mech-choice/log.png" alt="" />
					</div>
					<div class="section">
						<h3>{{ item.name }}</h3>
						<span>创建时间:{{ item.create_time.slice(0, 10) }}</span>
						<p>
							<span>机构类别:{{ item.type }}</span>
						</p>
						<p>
							<span>机构类型:{{ item.nature }}</span>
						</p>
						<p>
							<span>机构等级:{{ item.level }}</span>
						</p>
					</div>
					<div>
						<!-- <p>签约时间:{{ item.level_name }}</p>
						<p class="">剩余天数:{{ item.left_days }}</p> -->
					</div>
					<el-button class="btn" type="normal" @click="goDeatil(item)"
						>点击进入</el-button
					>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getMangementList } from '@/api/other'
export default {
	name: 'mechChoise',
	components: {},
	data () {
		return {
			list: [],
		}
	},
	created () { },
	mounted () {
		this.getList()
	},
	methods: {
		getList () {
			getMangementList().then( res => {
				if ( res.code === 0 ) {
					this.list = res.data || []
					// 顶部机构列表
					this.$store.commit( 'app/SET_ORG_LIST', res.data )
				}
			} )
		},
		goDeatil ( item ) {
			// 设置机构代码
			this.$store.commit( 'app/SET_ORG_CODE', this.org_code )
			// 进入详情
			this.$router.push( {
				name: 'dataDashboard',
				params: { org_code: item.org_code },
			} )

		},
	},
}
</script>
<style scoped lang="less">
.content {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	margin-left: 1%;
	:nth-last-child(2n) {
		margin-right: 2.1%;
	}
}
.box {
	padding: 40px;
	text-align: left;
	height: 220px;
	box-sizing: border-box;
	background-color: white;
	flex: 0 0 46.188%;
	margin-bottom: 20px;
	margin-right: 2.1%;
	background-image: url('~@/assets/imgs/mech-choice/jgbg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: relative;
	/deep/ .el-button-normal:hover {
		background-color: #0abbf9;
		border-color: #0abbf9;
	}
	/deep/ .el-button-normal:focus {
		background-color: #0abbf9;
		border-color: #0abbf9;
	}
	.logo img {
		width: 121px;
		// height: 121px;
	}
	.section {
		width: 45%;
		span {
			color: #666666;
			line-height: 28px;
		}
		h3 {
			color: #0a70b0;
			font-weight: 600;
		}
	}
	._box div {
		display: inline-block;
		margin-right: 15%;
	}
	.btn {
		position: absolute;
		right: 40px;
		top: 95px;
	}
	.size {
		position: absolute;
		top: 30px;
		right: 40px;
		color: #1169c5;
	}
}
</style>
